﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>考勤时间设置</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../../css/calendar.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/layui.css" media="all">
    <!-- 小时 -->
    <link rel="stylesheet" type="text/css" href="../../css/timePicker.css">
    <style type="text/css">
        .Date_lr{width:50%;text-align:center;}
        .span21{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            font-size:14px;
            color: #666;
            border: 1px solid #e5e5e5;
            padding:2px 8px;
            line-height: 20px;
            border-radius: .2rem;
            background-color: #fff;
        }
        #checkinout{
            height: 50px;
            line-height: 50px;
            position: relative;
            margin: 10px;
            padding: 2px 0;
            display: -webkit-box;
            display: flex;
            border: 1px solid #e5e5e5;
            border-radius: .02rem;
            background-color: #fff;
        }
        #firstSelect p{line-height:25px;color: #999;font-size:12px;}
        #startDate{border:0;position: absolute;left: 0;margin: 0 auto;width: 50%;font-size: 16px;color: #05c0ad;text-align: center;}
        #endDate{border:0;position: absolute;right: 0;margin:auto 0;width:50%;font-size: 16px;color: #05c0ad;text-align: center;}
        .mask_calendar {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.4);
            display: none;
            z-index: 9999;
        }
        .calendar {
            height: 400px;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        @keyframes slideInDown {
            from {
                transform: translate3d(0, -100%, 0);
                visibility: visible;
            }

            to {
                transform: translate3d(0, 0, 0);
            }
        }
        .slideInDown {
            animation-name: slideInDown;
        }
    </style>
</head>
<body>
<div id="checkinout">
    <div id="firstSelect" style="width:100%;">
        <div class="Date_lr" style="float:left;">
            <p>考勤开始日期</p>
            <input id="startDate" type="text" value=""style="" readonly>
        </div>
        <div class="Date_lr" style="float:right;">
            <p>考勤结束日期</p>
            <input id="endDate" type="text" value="" style="" readonly>
        </div>
        <span class="span21">共<span class="NumDate">1</span>天</span>
    </div>
</div>
<div class="mask_calendar">
    <div class="calendar"></div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="form-group">
    <!--<label class="col-sm-1 control-label"  >开始时间</label>-->
    <label style="float: left;margin-left: 20px"  >开始时间：</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="beginTime" autocomplete="off">
        <font color="red" id="validateBeginTime"></font>
    </div>
</div>
</div>
<br>
<div class="row">
    <div class="form-group">
        <!--<label class="col-sm-1 control-label" >结束时间</label>-->
        <label style="float: left;margin-left: 20px" >结束时间：</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="endTime" autocomplete="off">
            <font color="red" id="validateEndTime"></font>
        </div>
    </div>
</div>
<br>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" onclick="compareTime1()">确定</button>
    </div>
</div>
<!--<button class="btn btn-info mt-5 mb-3" onclick="compareTime1()">
    确定
</button>-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/date.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<!-- 时间插件 -->
<script type="text/javascript" src="../../js/jquery-timepicker.js"></script>
<script>
    $(function(){
        $('#firstSelect').on('click',function () {
            $('.mask_calendar').show();
        });
        $('.mask_calendar').on('click',function (e) {
            if(e.target.className == "mask_calendar"){
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
            }
        });
        $('#firstSelect').calendarSwitch({
            selectors : {
                sections : ".calendar"
            },
            index : 4,      //展示的月份个数
            animateFunction : "slideToggle",        //动画效果
            controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber : "90",     //控制天数
            comeColor : "#2EB6A8",       //考勤开始颜色
            outColor : "#2EB6A8",      //考勤结束颜色
            comeoutColor : "#E0F4F2",        //考勤开始和考勤结束之间的颜色
            callback :function(){//回调函数
                $('.mask_calendar').fadeOut(200);
                var startDate = $('#startDate').val();  //考勤开始的天数
                var endDate = $('#endDate').val();      //考勤结束的天数
                var NumDate = $('.NumDate').text();    //共多少天

                console.log(startDate);
                console.log(endDate);
                console.log(NumDate);



                //下面做ajax请求
                //show_loading();
                /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
                    if(data.result==1){
                        //成功
                    } else {
                        //失败
                    }
                });*/
            }  ,
            comfireBtn:'.comfire'//确定按钮的class或者id
        });



        var b=new Date();
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#startDate').val(ye+'-'+mo+'-'+da);
        /*b=new Date(b.getTime()+24*3600*1000);
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;*/
        $('#endDate').val(ye+'-'+mo+'-'+da);
    });
    //时间选择
    $("#beginTime").hunterTimePicker();
    $("#endTime").hunterTimePicker();
    function compareTime1() {
        var endtime = $('#endTime').val();
        var startDate = $('#startDate').val();
        var a1 = new Date(startDate.replace(/-/g, "/"));
        startDate = new Date(a1.getTime());
        var now = new Date();
        var now1 = new Date(now.toLocaleDateString().toString().replace(/-/g, "/"));
        /*var myDate = new Date();
        console.log("hour"+myDate.getHours()); //获取当前小时数(0-23)
        console.log("minute"+myDate.getMinutes()); //获取当前分钟数(0-59)
        var mytime=myDate.toLocaleTimeString(); //获取当前时间
        console.log("当前时间"+mytime);
        var now = new Date(myDate.getHours() + ":" + myDate.getMinutes());

        console.log(endtime);*/
        /*选择的开始日期和当前日期比较*/
        var hour = parseInt(endtime.slice(0, 2));
        var minute = parseInt(endtime.slice(3, 5));
        var nowhour = parseInt(now.getHours());
        var nowminute = parseInt(now.getMinutes());
        console.log("startDate:"+startDate);
        console.log("now1:"+now1);
        if (startDate.getTime() == now1.getTime()) {

            /*比较小时*/
            if (hour < nowhour) {
                var bool = confirm("现在已经超过你设置的最后考勤时间，是否继续");
                if (bool==true) {
                    /*执行请求代码*/
                    isDoroutExist()
                }
            } else if (hour == nowhour && minute < nowminute) {
                var bool = confirm("现在已经超过你设置的最后考勤时间，是否继续");
                if (bool==true) {
                    /*执行请求代码*/
                    isDoroutExist()
                }
            } else {
                /*执行请求代码*/
                isDoroutExist()
            }
        }else {
            /*执行请求代码*/
            isDoroutExist()
        }
    }

    function isDoroutExist() {
        var beginTime = $("#beginTime").val();
        var endTime = $("#endTime").val();
        var startDate = $('#startDate').val();  //考勤开始的天数
        var endDate = $('#endDate').val();      //考勤结束的天数
        /*var a1 = new Date(startDate.replace(/-/g, "/"));
        startDate = new Date(a1.getTime());
        var a2 = new Date(endDate.replace(/-/g, "/"));
        endDate = new Date(a2.getTime());*/
        var dates = getDiffDate1(startDate,endDate);
        console.log("startDate:"+startDate);
        console.log("endDate:"+endDate);
        console.log(dates);
        $.ajax({
            url: "/dorout/isDoroutExist",
            type: "POST",
            async: false,
            dataType: "json",
            data: {"dates": dates.toString(),"beginTime":beginTime,"endTime":endTime},
            success: function (data) {
                if (true==data.isexist){
                    var bool1 = confirm(data.message);
                    if (bool1 == true) {
                        setCheckTime(dates,beginTime,endTime);
                    }else {
                        alert("取消成功，请重新设置考勤时间");
                    }
                }else {
                    alert(data.message);
                }


            },
            error: function () {
                /*window.location.href = "../yang/;*/
                alert("出错")
            },
        });

    }

    function setCheckTime(dates,beginTime,endTime,) {
        $.ajax({
            url: "/dorout/setCheckTime",
            type: "POST",
            async: false,
            dataType: "json",
            data: {"dates": dates.toString(), "beginTime": beginTime, "endTime": endTime},
            success: function (data) {
                console.log("data" + data);
                alert(data.message);
            },
            error: function () {
                /*window.location.href = "../yang/;*/
                alert("出错")
            },
        });
    }

    //获取两个日期之间的所有日期
    function getDiffDate1(start, end) {
        var startTime = getDate1(start);
        var endTime = getDate1(end);
        var dateArr = [];
        while ((endTime.getTime() - startTime.getTime()) >= 0) {
            var year = startTime.getFullYear();
            var month = startTime.getMonth().toString().length === 1 ? "0" + (parseInt(startTime.getMonth().toString(),10) + 1) : (startTime.getMonth() + 1);
            var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
            dateArr.push(year + "-" + month + "-" + day);
            startTime.setDate(startTime.getDate() + 1);
        }
        return dateArr;
    }
    function getDate1 (datestr) {
        let temp = datestr.split("-");
        if (temp[1] === '01') {
            temp[0] = parseInt(temp[0],10) - 1;
            temp[1] = '12';
        } else {
            temp[1] = parseInt(temp[1],10) - 1;
        }
        //new Date()的月份入参实际都是当前值-1
        let date = new Date(temp[0], temp[1], temp[2]);
        return date;
    }


</script>

</body>
</html>
